<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>组件插槽</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<!--使用组件-->
<hello-world>
    <div slot="header">插槽演示</div>
    <div slot="content">我是通过插槽进入的组件的内容</div>
</hello-world>
<br/>
<hello-world></hello-world>

<template id="hw-template">
    <!-- 组件的样式，只对 template 内部的标签有效 -->
    <style>
        .card {
            width: 500px;
            height: 300px;
            border: 1px solid #ccc;
        }

        .card-header {
            padding: 10px;
            background-color: #ccc;
        }

        .card-content {
            padding: 10px 20px;
        }

    </style>
    <div>
        <div class="card">
            <div class="card-header">
                <!-- 组件插槽 -->
                <slot name="header">卡片头部</slot>
            </div>
            <div class="card-content">
                <!-- 组件插槽 -->
                <slot name="content">默认内容</slot>
            </div>
        </div>
    </div>
</template>
<script>
    class HelloWorld extends HTMLElement {
        constructor() {
            //继承的构造函数中必须手动调用super()函数
            super();
            //得到组件的模板内容
            const templateContent = document.querySelector('#hw-template').content;
            //创建组件的根元素：影子DOM节点
            const shadowRoot = this.attachShadow({mode: 'open'});
            //将模板节点添加到影子DOM节点中
            shadowRoot.appendChild(templateContent.cloneNode(true));
        }
    }

    customElements.define('hello-world', HelloWorld);
</script>
</body>

</html>
